<template>
	<div class="container" style="">
		<van-nav-bar title="门店报表" left-arrow @click-left="$router.back()" fixed>
			<template #right>
				<icon-svg name="select" class="icon" :size="20" @click="openSearch" />
			</template>
		</van-nav-bar>
		<div class="flex-scroll">
			<el-table
				ref="tableRef"
				v-loading="tableLoading"
				:show-summary="true"
        :summary-method="getSummaries"
				row-key="dept_id"
				:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
				height="100%"
				stripe
				:data="tableData"
			>
				<template v-for="(colums, index) in tableColums">
					<el-table-column
						:fixed="colums.fixed"
						:width="colums.width"
						:minWidth="colums.minWidth"
						:prop="colums.prop"
						:label="colums.label"
						:showOverflowTooltip="colums.showOverflowTooltip"
						:sortable="colums.sortable"
					></el-table-column>
				</template>
			</el-table>
		</div>
		<PopSelect ref="popSelectRef" @resetSearch="resetSearch" />
	</div>
</template>

<script>
import { Table, TableColumn } from "element-ui";
import PopSelect from "./popSelect.vue";
import dayjs from "dayjs";
export default {
	components: {
		ElTable: Table,
		ElTableColumn: TableColumn,
		PopSelect
	},
	data() {
		return {
			tableData: [],
			search: {
				begin_time: dayjs().format("YYYY-MM-DD"),
				end_time: dayjs().format("YYYY-MM-DD"),
				bus_state: "0",
				dept_id: "", //全部
				biz_id: "", //事业部
				company_id: "", //公司
				appoint_dept_id: []
			},
			tableColums: [
				{
					label: "门店",
					prop: "dept_name",
					width: 110,
					fixed: true,
					align: "left",
					showOverflowTooltip: true
				},
				{ label: "排客目标", prop: "goal_arrive", width: 100, showOverflowTooltip: true },
				{
					label: "排新客数",
					prop: "new_plan_arrive",
					width: 100,
					showOverflowTooltip: true,
					sortable: true
				},
				{
					label: "排老客数",
					prop: "old_plan_arrive",
					width: 100,
					showOverflowTooltip: true,
					sortable: true
				},
				{
                    label: "总排客数",
					prop: "plan_arrive",
					minWidth: 80,
					showOverflowTooltip: true,
					sortable: true
				},
				{
                    label: "总排客率",
					prop: "plan_arrive_ratio",
					minWidth: 80,
					showOverflowTooltip: true,
					sortable: true
				},
				{
					label: "新客到店",
					prop: "new_lost_arrive",
					width: 100,
					showOverflowTooltip: true,
					sortable: true
				},
				{
					label: "老客到店",
					prop: "old_cart_arrived",
					width: 100,
					showOverflowTooltip: true,
					sortable: true
				},
				{ label: "总客数", prop: "total_cart_arrived", width: 100, sortable: true },
				{ label: "总到店率", prop: "cart_arrived_ratio", width: 100, sortable: true },
				{ label: "新客业绩", width: 130, prop: "new_achieve", sortable: true },
				{ label: "老客业绩", width: 120, prop: "old_new_achieve", sortable: true },
				{ label: "老带新业绩", width: 120, prop: "achieve_companion", sortable: true },
				{ label: "总业绩", width: 120, prop: "total_achieve", sortable: true },
				{ label: "新客消费人数", prop: "new_arrive", width: 100, sortable: true },
				{ label: "老客消费人数", prop: "old_new_arrive", width: 100, sortable: true },
				// { label: "老转新", prop: "old_new_arrive", width: 100, sortable: true },
				{ label: "总消费人数", prop: "total_arrive", width: 100, sortable: true },
				{ label: "流失人数", width: 100, prop: "lost", sortable: true },
				{ label: "流失率", width: 80, prop: "lost_rate" },
				{ label: "退款人数", prop: "refund_people", width: 100, sortable: true },
				{
					label: "退款业绩",
					width: 120,
					prop: "refund_achieve",
					sortable: true
				},
				{
					label: "退款率",
					width: 120,
					prop: "refund_people_ratio",
					sortable: true
				},
				{
					label: "退款占比",
					width: 120,
					prop: "refund_achieve_ratio",
					sortable: true
				},
				{ label: "新客客单", prop: "new_price", width: 100, sortable: true },
				{ label: "老客客单", prop: "old_new_price", width: 120, sortable: true },
				{ label: "总客单", prop: "total_price", width: 100, sortable: true },
				{ label: "定金人数", width: 100, prop: "deposit" },
				{ label: "未到店人数", width: 120, prop: "no_arrive" }
			],
			tableLoading: true
		};
	},
	created() {
		this.search.biz_id = this.getCurrBiz();
		this.getList();
	},
	methods: {
		async getList() {
			this.tableLoading = true;
			let res = await this.$service.finance.zoneReport({
				...this.search
			});
			this.tableData = res;

			this.$nextTick(() => {
				// 强刷页面
				this.$refs.tableRef.doLayout();
				this.tableLoading = false;
			});
		},
		getSummaries({ columns, data }) {
			let ignore = ["date", "biz_name", "city_name", "dept_name"];
			let new_achieve = 0,
				old_new_achieve = 0,
				total_achieve = 0,
                new_arrive = 0,                
                old_arrive = 0,                
				old_new_arrive = 0,
				total_arrive = 0,
                lost = 0,
                deposit = 0,
                goal_arrive = 0,
                plan_arrive = 0,
                total_cart_arrived = 0,
                refund_achieve = 0,
                refund_people = 0,
                no_arrive = 0;
			return columns.map((column, index) => {
				if (index === 0) {
					return "合计";
				}
				if (ignore.includes(column.property)) return "";
				if (column.property == "plan_arrive_ratio") {
					if (goal_arrive) {
						let result = plan_arrive / goal_arrive;
						return this.toFixed(result * 100) + "%";
					} else {
						return 0;
					}
				}
				if (column.property == "cart_arrived_ratio") {
					if (plan_arrive) {
						let result = total_cart_arrived / plan_arrive;
						return this.toFixed(result * 100) + "%";
					} else {
						return 0;
					}
				}
				if (column.property == "refund_people_ratio") {
					if (total_arrive) {
						let result = refund_people / total_arrive;
						return this.toFixed(result * 100) + "%";
					} else {
						return 0;
					}
				}
				if (column.property == "refund_achieve_ratio") {
					if (total_achieve) {
						let result = refund_achieve / total_achieve;
						return this.toFixed(result * 100) + "%";
					} else {
						return 0;
					}
				}
				if (column.property == "new_price") {
					if ((new_arrive + lost) > 0) {
						let result = new_achieve / (new_arrive+lost);
						return this.toFixed(result);
					} else {
						return 0;
					}
				}
				if (column.property == "old_new_price") {
					if (old_new_arrive) {
						let result = old_new_achieve / old_new_arrive;
						return this.toFixed(result);
					} else {
						return 0;
					}
				}
				if (column.property == "total_price") {
					if ((new_arrive + lost) > 0) {
						let result = total_achieve / (new_arrive+lost);
						return this.toFixed(result);
					} else {
						return 0;
					}
				}
				if (column.property == "lost_rate") {
					if (lost + new_arrive) {
						let result = lost / (lost + new_arrive);
						return this.toFixed(result * 100) + "%";
					} else {
						return 0 + "%";
					}
				}

				const values = data.map(item => Number(item[column.property]));
				let sum = values.reduce((prev, curr) => {
					const value = Number(curr);
					if (!isNaN(value)) {
						return prev + curr;
					}
					return prev;
				}, 0);
				if (column.property == "goal_arrive") {
					goal_arrive = sum;
				}
				if (column.property == "refund_achieve") {
					refund_achieve = sum;
				}
				if (column.property == "refund_people") {
					refund_people = sum;
				}
				if (column.property == "plan_arrive") {
					plan_arrive = sum;
				}
				if (column.property == "total_cart_arrived") {
					total_cart_arrived = sum;
				}
				if (column.property == "new_achieve") {
					new_achieve = sum;
				}
				if (column.property == "old_new_achieve") {
					old_new_achieve = sum;
				}
				if (column.property == "total_achieve") {
					total_achieve = sum;
				}
				if (column.property == "new_arrive") {
					new_arrive = sum;
				}
				if (column.property == "old_arrive") {
					old_arrive = sum;
				}
				if (column.property == "old_new_arrive") {
					old_new_arrive = sum;
				}
				if (column.property == "total_arrive") {
					total_arrive = sum;
				}
				if (column.property == "lost") {
					lost = sum;
				}
				if (column.property == "deposit") {
					deposit = sum;
				}
				if (column.property == "no_arrive") {
					no_arrive = sum;
				}

				return this.toFixed(sum);
			});
		},
		openSearch() {
			this.$refs.popSelectRef.open();
			this.$nextTick(() => {
				this.$refs.popSelectRef.setData(this.search);
			});
		},
		resetSearch(data) {
			console.log(data, "data");
			this.search = { ...this.search, ...data };
			console.log(this.search, "search");

			this.getList();
		}
	}
};
</script>
<style scoped lang="scss">
.container {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding-top: 46px;
	font-size: 14px;

	::v-deep .el-table th {
		background-color: #f2f2f2 !important;
	}

	.flex-scroll {
		height: calc(100% - 46px);
		// overflow-y: auto;
	}

	.has-gutter {
		margin-top: 40px;
	}
}
</style>
